<!DOCTYPE html>
<html lang="zh-cn">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>javascript 阶段</title>
    <style>
        body ,
        html {
            width: 100%;
            height: 100%;
            /* background-color: black; */
        }

        div {
            width: 100%;
            height: 100%;
        }

        input {
            display: inline-block;
            padding-left: 10px;
            width: 300px;
            height: 50px;
            margin-left: 300px;
            box-sizing: border-box;
            border: 1px solid black;
        }


    </style>
</head>

<body>
        <input type="text" placeholder="请输入QQ邮箱">
    <script>
        var inputEl = document.querySelector("input");
        var button = document.querySelector("button");
        // var div_1 = document.querySelector("div"); 
        inputEl.onmouseout = function () {
            var v1 = inputEl.value;
            // console.log(v1);
            var regE01 = /[^0]/;
            var regE03 = /[^\D]/
            if (regE01.test(v1) && regE03.test(v1)) {
                // console.log("正确的");
            } else {
                console.log("这是错误的格式");
                return;
            }
            if(v1.length >=11 && v1.length <=18) {
            }else {
                console.log("长度不符合规范");
                return;
            }
            var regExp = /\d/g;
            var res = v1.match(regExp).join("");
            console.log(res.length);
            if(res.length >= 4 && res.length <=11) {
                console.log("数字字符够了");
            }else {
                console.log("数字字符不够");
                console.log(res.length);
                return;
            }
            var regE02 = /@qq.com$/;
            if (regE02.test(v1)) {
                console.log("这是正确的QQ邮箱格式");
            }else {
                console.log("这不是QQ邮箱");
                return ;
            }
        }
    </script>
</body>

</html>